<template>
	<view class="user-container">
		<!-- 用户信息头部 -->
		<view class="user-header">
			<view class="avatar-section">
				<image class="user-avatar" src="/static/default-avatar.png" mode="aspectFill"></image>
				<view class="user-info">
					<text class="username">{{ userInfo.username || '未登录' }}</text>
					<text class="user-id" v-if="userInfo.id">ID: {{ userInfo.id }}</text>
				</view>
			</view>
			<view class="login-status" v-if="!isLoggedIn">
				<view class="login-button" @click="goToLogin">
					<text>立即登录</text>
				</view>
			</view>
		</view>

		<!-- 用户详细信息 -->
		<view class="info-section" v-if="isLoggedIn">
			<view class="section-title">
				<text>个人信息</text>
			</view>
			
			<view class="info-item">
				<view class="info-label">
					<text>用户名</text>
				</view>
				<view class="info-value">
					<text>{{ userInfo.username || '-' }}</text>
				</view>
			</view>
			
			<view class="info-item">
				<view class="info-label">
					<text>手机号</text>
				</view>
				<view class="info-value">
					<text>{{ userInfo.mobile || '-' }}</text>
				</view>
			</view>
			
			<view class="info-item">
				<view class="info-label">
					<text>邮箱</text>
				</view>
				<view class="info-value">
					<text>{{ userInfo.email || '-' }}</text>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section" v-if="isLoggedIn">
			<view class="section-title">
				<text>功能菜单</text>
			</view>
			
			<view class="menu-item" @click="refreshUserInfo">
				<view class="menu-icon">
					<text>🔄</text>
				</view>
				<view class="menu-text">
					<text>刷新信息</text>
				</view>
				<view class="menu-arrow">
					<text>></text>
				</view>
			</view>
			
			<view class="menu-item" @click="checkLoginStatus">
				<view class="menu-icon">
					<text>✅</text>
				</view>
				<view class="menu-text">
					<text>检查登录状态</text>
				</view>
				<view class="menu-arrow">
					<text>></text>
				</view>
			</view>
		</view>

		<!-- 登出按钮 -->
		<view class="logout-section" v-if="isLoggedIn">
			<view class="logout-button" @click="logout">
				<text>退出登录</text>
			</view>
		</view>
	</view>
</template>

<script>
import authManager from '@/utils/auth.js'

export default {
	data() {
		return {
			userInfo: {},
			isLoggedIn: false
		}
	},
	
	onShow() {
		// 每次显示页面时刷新用户信息
		this.loadUserInfo()
	},
	
	methods: {
		/**
		 * 加载用户信息
		 */
		loadUserInfo() {
			this.isLoggedIn = authManager.isAuthenticated()
			if (this.isLoggedIn) {
				this.userInfo = authManager.getCurrentUser() || {}
			} else {
				this.userInfo = {}
			}
		},
		
		/**
		 * 跳转到登录页面
		 */
		goToLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		},
		
		/**
		 * 刷新用户信息
		 */
		async refreshUserInfo() {
			try {
				uni.showLoading({
					title: '刷新中...'
				})
				
				const userInfo = await authManager.refreshUserInfo()
				this.userInfo = userInfo
				
				uni.hideLoading()
				uni.showToast({
					title: '刷新成功',
					icon: 'success'
				})
			} catch (error) {
				uni.hideLoading()
				console.error('刷新用户信息失败:', error)
				
				// 如果刷新失败，可能是登录状态失效
				if (error.message.includes('未登录') || error.message.includes('401')) {
					this.handleAuthError()
				}
			}
		},
		
		/**
		 * 检查登录状态
		 */
		async checkLoginStatus() {
			try {
				uni.showLoading({
					title: '检查中...'
				})
				
				const isValid = await authManager.checkLoginStatus()
				
				uni.hideLoading()
				uni.showToast({
					title: isValid ? '登录状态有效' : '登录状态无效',
					icon: isValid ? 'success' : 'none'
				})
				
				if (!isValid) {
					this.handleAuthError()
				}
			} catch (error) {
				uni.hideLoading()
				console.error('检查登录状态失败:', error)
				this.handleAuthError()
			}
		},
		
		/**
		 * 处理认证错误
		 */
		handleAuthError() {
			this.isLoggedIn = false
			this.userInfo = {}
			
			uni.showModal({
				title: '提示',
				content: '登录状态已失效，请重新登录',
				showCancel: false,
				success: () => {
					this.goToLogin()
				}
			})
		},
		
		/**
		 * 退出登录
		 */
		async logout() {
			uni.showModal({
				title: '确认退出',
				content: '确定要退出登录吗？',
				success: async (res) => {
					if (res.confirm) {
						try {
							uni.showLoading({
								title: '退出中...'
							})
							
							await authManager.logout()
							
							uni.hideLoading()
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							})
							
							// 更新页面状态
							this.loadUserInfo()
							
							// 通知主界面更新状态
							uni.$emit('userLogoutSuccess')
							
							// 延迟跳转到登录页面
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/login/login'
								})
							}, 1500)
							
						} catch (error) {
							uni.hideLoading()
							console.error('退出登录失败:', error)
							
							// 即使退出失败，也清除本地状态
							authManager.clearAuth()
							this.loadUserInfo()
							
							// 通知主界面更新状态
							uni.$emit('userLogoutSuccess')
							
							// 显示退出成功提示并跳转
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							})
							
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/login/login'
								})
							}, 1500)
						}
					}
				}
			})
		}
	}
}
</script>

<style>
.user-container {
	min-height: 100vh;
	background-color: #1e2433;
	padding: 0 30rpx;
}

.user-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 60rpx 0 40rpx;
	border-bottom: 2rpx solid #2a304d;
}

.avatar-section {
	display: flex;
	align-items: center;
}

.user-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	background-color: #3a4366;
	margin-right: 30rpx;
}

.user-info {
	display: flex;
	flex-direction: column;
}

.username {
	font-size: 36rpx;
	color: #ffffff;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.user-id {
	font-size: 24rpx;
	color: #8a8a9a;
}

.login-button {
	background-color: #4e5eff;
	padding: 20rpx 40rpx;
	border-radius: 40rpx;
	color: #ffffff;
	font-size: 28rpx;
}

.section-title {
	font-size: 32rpx;
	color: #ffffff;
	font-weight: bold;
	margin: 40rpx 0 20rpx;
}

.info-section, .menu-section {
	margin-bottom: 40rpx;
}

.info-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #2a304d;
	padding: 30rpx;
	margin-bottom: 20rpx;
	border-radius: 20rpx;
}

.info-label {
	color: #8a8a9a;
	font-size: 28rpx;
}

.info-value {
	color: #ffffff;
	font-size: 28rpx;
}

.menu-item {
	display: flex;
	align-items: center;
	background-color: #2a304d;
	padding: 30rpx;
	margin-bottom: 20rpx;
	border-radius: 20rpx;
}

.menu-icon {
	font-size: 32rpx;
	margin-right: 20rpx;
	width: 40rpx;
	text-align: center;
}

.menu-text {
	flex: 1;
	color: #ffffff;
	font-size: 28rpx;
}

.menu-arrow {
	color: #8a8a9a;
	font-size: 24rpx;
}

.logout-section {
	margin-top: 60rpx;
	padding-bottom: 60rpx;
}

.logout-button {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ff4757;
	border-radius: 50rpx;
	height: 90rpx;
	color: #ffffff;
	font-size: 32rpx;
}
</style>